<template>
    <div class="shop-item-content">
        <div class="info-content">
            <div class="poster"><img :src="shopData.avatar" alt="" /></div>
            <div class="info">
              <div class="info_row">
                <div class="name">{{ shopData.name }}</div>
                <div class="cancle_btn" @click="delHandle(shopData)">{{ $t("取消关注") }}</div>
              </div>
              <div class="info_row" style="margin: 15px 0">
                <div class="number-content">
                  <!-- <p><span>{{ $t('好评率') }}</span>: {{ shopData.highOpinion }}</p> -->
                    <span>{{ $t("已售") }}：</span>{{ priceFormatInt(shopData.soldNum) }}
                </div>
                <div class="text">
                  <span>{{ $t("浏览量") }}：</span>{{ priceFormatInt(shopData.viewsNum) }}
                </div>
              </div>
              <div class="info_row">
                <div class="text">
                  <span>{{ $t("好评率") }}：</span>
                  {{ Math.floor(shopData.highOpinion * 100) || 100 }}%
                </div>
                <div class="link" @click="openShop(shopData.id)">
                  {{ $t("进入店铺") }}
<!--                  <img :src="arrow" alt="" />-->
                </div>
              </div>

                <!-- <div class="text"><span>{{ $t('已售') }}：</span> {{ shopData.soldNum || '0' }}</div> -->


                <!-- <div class="text"><span>{{ $t('分类') }}</span> {{ shopData.class }}</div>
        <div class="text"><span>{{ $t('商品') }}</span> {{ shopData.commodity }}</div>
        <div class="text"><span>{{ $t('关注') }}</span> {{ shopData.follow }}</div> -->
            </div>

        </div>
<!--        <div class="number-content">-->
<!--            &lt;!&ndash; <p><span>{{ $t('好评率') }}</span>: {{ shopData.highOpinion }}</p> &ndash;&gt;-->
<!--            <p>-->
<!--                <span>{{ $t("已售") }}</span>: {{ priceFormatInt(shopData.soldNum) }}-->
<!--            </p>-->
<!--        </div>-->
    </div>
</template>

<script>
import { priceFormatInt } from '@/utils/utis'
import {focusSellerDel} from "@/API/shop";
import {Toast} from "vant";
export default {
    name: "ShopItemOne",
    props: {
        shopData: {
            type: Object,
            required: true,
            default: function () {
                return {};
            },
        },
    },
    data() {
        return {
            priceFormatInt,
            arrow: require("@/assets/image/me/arrow3.png"),
        };
    },
    methods: {
        openShop(id) {
            this.$router.push({
                path: "/shop",
                query: {
                    sellerId: id,
                },
            });
        },
      delHandle(data) {
        focusSellerDel({ sellerId: data.id }).then(() => {
          Toast(this.$t("取消成功"));
          this.$emit('onLoad')
        })
      }
    },
};
</script>

<style lang="scss" scoped>
.shop-item-content {
    * {
        box-sizing: border-box;
    }

    margin-top: 20px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    >.info-content {
        display: flex;
        align-items: center;

        >.poster {
          flex-shrink: 0;
            width: 62px;
            height: 62px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;

            >img {
                width: 100%;
                height: auto;
            }
        }

        >.info {
            flex: 1;
            width: 0;
            padding-left: 10px;
            padding-right: 5px;
          .info_row{
            display: flex;
            align-items: center;
            justify-content: space-between;

          }

            .name {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 14px;
                //margin-bottom: 6px;
            }
          .cancle_btn{
            padding: 3px 10px;
            font-size: 12px;
            border: 1px solid #DCDFE6;
            color: #606266;
            border-radius: 20px;
          }

            .text {
                font-size: 14px;
                color: #606060;
                //margin-bottom: 2px;

                &:last-child {
                    margin-bottom: 0;
                }
            }
          .link {
            padding: 3px 10px;
            //height: 20px;
            align-items: center;
            font-size: 12px;

            color: var(--main-color);
            //background: #fcf2e2;
            border: 1px solid var(--main-color);
            border-radius: 20px;

            >img {
              width: 4px;
              height: auto;
            }
          }
          .number-content {
            //width: 100%;
            //display: flex;
            //align-items: center;
            //justify-content: space-between;
            color: #606060;
            font-size: 14px;
            //padding-top: 10px;
            //border-top: 1px solid #eee;
            //margin-top: 10px;

            >p {
              font-size: 10px;
              color: #333;
            }
          }
        }


    }


}</style>
